<template>
  <div class="channel-detail">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'ChannelList' }">频道列表</el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ editMode ? `编辑频道详情 -- ${title}` : '新增频道详情' }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-collapse v-model="collapse">
      <el-collapse-item title="频道元数据编辑" name="1">
        <el-form :model="info" :rules="channelRule" ref="channelForm">
          <el-row v-if="editMode">
            <el-col class="time-text">
              <el-col :span="4">
                <el-tag effect="dark" v-if="currentOnlineStatus == 1" type="success">
                  <i class="el-icon-checked"></i>
                  已上线
                </el-tag>
                <el-tag effect="dark" type="danger" v-else>
                  已下线
                </el-tag>
              </el-col>
              <el-col :span="4">创建时间: {{ info.createdAt }}</el-col>
              <el-col :span="4">更新时间: {{ info.updatedAt }}</el-col>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item prop="title" label="频道名称">
                <el-input v-model="info.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="subTitle" label="频道副标题">
                <el-input v-model="info.subTitle"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="url" label="频道地址">
                <el-input v-model="info.url"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="kind" label="频道类型">
                <channel-kind-sl v-model="info.kind"></channel-kind-sl>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="online" label="上下线状态">
                <online-sl v-model="info.online"></online-sl>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="platform" label="频道所在平台">
                <plat-sl v-model="info.platform"></plat-sl>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item prop="bgImage" label="频道背景图">
                <upload-resource
                  is-public
                  @upload="(img) => $set(info, 'bgImage', img.url)"
                  folder="channel"
                ></upload-resource>
                <el-button
                  @click="$set(info, 'bgImage', '')"
                  type="text"
                  class="danger-text"
                  v-if="this.info.bgImage"
                  
                >
                  删除图片
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <img style="max-height: 150px;" :src="info.bgImage" v-if="info.bgImage" />
            </el-col>
          </el-row>

          <!-- <el-row>
            <el-col :span="4">
              <el-button type="success" @click="exportConfig">导出配置</el-button>
            </el-col>
            <el-col :span="4">
              <el-button type="primary">导入入入入入入配置</el-button>
            </el-col>
          </el-row> -->

          <el-row>
            <el-button type="success" v-if="editMode" @click="save" :loading="saving">
              修改
            </el-button>
            <el-button type="primary" v-else @click="save" :loading="saving">新增</el-button>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="频道下数据编辑" name="2" v-if="info.id">
        <div v-if="info.id">
          <div class="channel-list">
            <span>模块列表</span>
            <span class="channel-icon">
              <i :class="{'el-icon-s-operation':true,'is-active':!isActive}" @click="()=>isActive=false"></i>
              <i :class="{'el-icon-menu':true,'is-active':isActive}" @click="()=>isActive=true"></i>
            </span>
          </div>
          <!-- <channel-edit :channel="info"></channel-edit> -->
          <component :is="componentCurrentBind" :channel="info"></component>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import { FormRuleConf } from '@/config';
  import EditMixins from 'mixins/Edit';
  import ChannelEdit from 'comp/ChannelEdit';
  import ChannelEditTable from 'comp/ChannelEditTable';
  import UploadResource from 'comp/UploadResource';

  export default {
    mixins: [EditMixins],
    data() {
      return {
        collapse: ['2'],
        title: '',
        currentOnlineStatus: 0,
        ...FormRuleConf.Channel,
        
        // 切换是否active
        isActive:true,
        // 绑定的组件
        componentCurrentBind:'ChannelEdit',
        // 组件
        ChannelEdit:'ChannelEdit',
        ChannelEditTable:'ChannelEditTable',
      };
    },
    components: {
      ChannelEdit,ChannelEditTable,
      UploadResource,
    },
    watch:{
      isActive(value){
        if(value){
          this.componentCurrentBind = this.ChannelEdit
        }else{
          this.componentCurrentBind = this.ChannelEditTable
        }
      }
    },
    methods: {
      /**
       * 获取频道详情
       */
      getInfo() {
        if (!this.id || this.$route.name != 'ChannelDetail' || this.infoGetting) return;

        this.infoGetting = true;
        this.$service
          .CmsChannelInfo({ id: this.id })
          .then((res) => {
            this.info = { ...res };
            this.title = res.title;
            this.currentOnlineStatus = res.online;
            this.$service.CmsChannelPreview({ channelId: this.id });
          })
          .catch((err) => {
            // this.$tabs.close();
          })
          .finally(() => {
            this.infoGetting = false;
          });
      },
      /**
       * 保存频道信息
       */
      save() {
        if (this.saving) return;

        this.$refs.channelForm.validate((valid) => {
          if (valid) {
            this.saving = true;
            this.$service
              .CmsChannelSave(this.info, JSON_HEADER)
              .then((res) => {
                this.$message.success('提交成功!');
                this.$route.push({
                  name: 'ChannelDetail',
                  params: { id: res.id },
                });
                this.getInfo();
              })
              .finally(() => {
                this.saving = false;
              });
          }
        });
      },
      exportConfig() {
        console.log(JSON.stringify(this.info, null, 2));
      },
    },
  };
</script>

<style lang="less" scoped>
  .channel-detail {
    padding-bottom: 30px;
    
    .channel-list{
      font-size: 14px;

      .channel-icon{
        float: right;

        i{
          margin-left: 10px;
          font-size: 16px;

          &:hover{
            color:#409EFF;
          }

        }
        & .is-active{
          color:#409EFF;
        }
      }
    }
  }
</style>